<template>
<q-dialog class="add-edit-shiftitem-dialog dialog" v-model="show" persistent>
  <q-card style="min-width: 400px">
    <q-card-section class="dialog-title bg-primary">
      <div class="text-center text-white">{{state==='add'?'添加休息时间':'编辑休息时间'}}</div>
    </q-card-section>
    <q-form @submit="submit" class="q-gutter-md dialog-content" greedy>
      <q-card-section class="padding-r-20 padding-t-20 padding-l-20">
<!--        班制信息-->
        <div class="form-item q-mb-md">
          <label class="text-right name">车间班制:</label>
          <!--<span class="item-value">{{rowInfo.workshopName}}-{{rowInfo.name}}</span>-->
          <span class="item-value">{{workShopName}}（{{rowInfo.name}}）</span>
        </div>
        <div class="form-item q-mb-md">
          <label class="text-right name">工作时段:</label>
          <span class="item-value">{{workTime.startTime}}-{{workTime.endTime}}</span>
        </div>
<!--        开始时间-->
        <div class="form-item">
          <label class="text-right name margin-r-6">
            <span class="text-red">*</span>开始时间:
          </label>
          <q-field
            class="field"
            dense
            ref="startTime"
            borderless
            no-error-icon
            v-model="startTime"
            :rules="[
                      val => /^(?:[01]\d|2[0-3])(?::[0-5]\d)$/.test(val) || '请选择时间',
                      val => judgeTime(val, 'startTime')
                    ]"
          >
            <date-picker style="width: 300px" class="input relative-position" v-model="startTime" type="time" format="HH:mm" value-type="format" :clearable="false" :editable="false"></date-picker>
          </q-field>
        </div>
<!--        结束时间-->
        <div class="form-item">
          <label class="text-right name margin-r-6">
            <span class="text-red">*</span>结束时间:
          </label>
          <q-field
            class="field"
            dense
            ref="endTime"
            borderless
            no-error-icon
            v-model="endTime"
            :rules="[
                      val => /^(?:[01]\d|2[0-3])(?::[0-5]\d)$/.test(val) || '请选择时间',
                      val => judgeTime(val, 'endTime')
                    ]"
          >
            <date-picker style="width: 300px" class="input" v-model="endTime" type="time" format="HH:mm" value-type="format" :clearable="false" :editable="false"></date-picker>
          </q-field>
        </div>
        <!--        说明-->
        <yz-input
          v-model.trim="description"
          inputType="textarea"
          :maxlength="100"
          title="说明"
        />
      </q-card-section>
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline label="取消" color="primary" @click="hideDialog" class="q-mr-md"/>
        <q-btn unelevated label="确认" color="primary" type="submit" :loading="submitting"/>
      </div>
    </q-form>
  </q-card>
</q-dialog>
</template>

<script>
import moment from 'moment'
export default {
  name: 'add-edit-shiftitem-dialog',
  props: {
    workShopName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      show: false,
      // 分为编辑状态和添加状态 'code-edit' / 'add' / 'child'
      state: 'add',
      rowInfo: {}, // 选中行的信息
      workTime: {}, // 工作时段
      // 添加日期的工作时段
      workDate: {
        startDate: '',
        endDate: ''
      },
      startTime: null, // 开始时间
      endTime: null, // 结束时间
      workFlag: 0, // 是否工作
      description: null, // 说明
      id: null,
      submitting: false // 提交状态
    }
  },
  methods: {
    // 时间校验
    judgeTime (val, type) {
      if (this.startTime !== null && this.startTime.length > 0 && type === 'startTime') {
        let startDate = this.getDate(this.workTime.startTime, this.startTime).endDate
        if (startDate.getTime() <= this.workDate.startDate.getTime() || startDate.getTime() >= this.workDate.endDate.getTime()) {
          return '开始时间必须在工作时段内'
        }
      }
      if (this.endTime !== null && this.endTime.length > 0 && type === 'endTime') {
        let endDate = this.getDate(this.workTime.startTime, this.endTime).endDate
        if (endDate.getTime() <= this.workDate.startDate.getTime() || endDate.getTime() >= this.workDate.endDate.getTime()) {
          return '结束时间必须在工作时段内'
        }
      }

      return true
    },
    // 判断是否超出
    timeBefore (flag, startTime, endTime) {
      const newFlag = moment(flag).subtract(8, 'h') // 减掉时区
      const date = moment(newFlag).format('YYYY-MM-DD')
      const startDate = moment(`${date} ${startTime}`)
      const endDate = moment(`${date} ${endTime}`)
      if (moment(newFlag).isAfter(startDate)) {
        // console.log(moment(newFlag).format('YYYY-MM-DD HH:mm:SS'), '开始时间少一天')
        startDate.add(1, 'd')
      }
      if (moment(newFlag).isAfter(endDate)) {
        // console.log('结束时间少一天')
        endDate.add(1, 'd')
      }
      return endDate.isSameOrBefore(startDate, 'minute')
    },

    // 显示弹框
    showDialog (state, item, rowInfo, workTime) {
      this.initInfo(state, item, rowInfo, workTime)
      this.show = true
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (state, info, rowInfo, workTime) {
      // this.name = ''
      this.startTime = ''
      this.startTime = ''
      this.endTime = ''
      this.workFlag = 0
      this.description = ''
      this.state = state
      this.rowInfo = rowInfo
      this.workTime = workTime
      this.workDate = this.getDate(this.workTime.startTime, this.workTime.endTime)
      this.id = info.id
      if (state === 'add') {
        this.description = null
      } else {
        this.startTime = info.startTime
        this.endTime = info.endTime
        this.description = info.description
      }
    },
    // 提交
    submit () {
      const isSameOrBefore = this.timeBefore(this.workDate.startDate, this.startTime, this.endTime)
      if (isSameOrBefore) {
        this.$showErrTips('结束时间必须晚于开始时间')
      } else {
        const params = {
          startTime: this.startTime,
          endTime: this.endTime,
          workFlag: 0,
          description: this.description,
          workShiftsItemId: this.id
        }
        this.submitting = true
        this.$emit('submit', this.state, params, this.id)
      }
    },
    // 时间切换
    changeStartTime (val) {
      this.startTime = val.split(' ')[1]
      this.$refs.startTimeProxy.hide()
    },
    changeEndTime (val) {
      this.endTime = val.split(' ')[1]
      this.$refs.endTimeProxy.hide()
    },
    resetValidate () {
      this.$refs.startTime.validate()
      this.$refs.endTime.validate()
    },
    // 获取开始、结束日期, 跨天就加一
    getDate (startTime, endTime) {
      const preifx = '1970-02-01T'
      const preifx1 = '1970-02-02T'
      const suffix = 'Z'
      const startStr = `${preifx}${startTime}:00${suffix}`
      const startDate = new Date(startStr)
      let endStr = `${preifx}${endTime}:00${suffix}`
      let endDate = new Date(endStr)
      if (startDate.getTime() >= endDate.getTime()) {
        endStr = `${preifx1}${endTime}:00${suffix}`
        endDate = new Date(endStr)
      }
      return { startDate, endDate }
    }
  }
}
</script>

<style scoped lang="stylus">
.item-value{
  margin-left 18px
  line-height 32px
}
.margin-r-6{
  margin-right 6px
}
.form-item{
  display flex
  .input{
    flex 1
    vertical-align middle
  }
}
</style>
